<template>
  <div class="container" :class="signModel?'signUpMode':''">

    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <el-form v-model="form" label-width="auto" class="loginForm sign-in-form">
          <el-form-item label="账号">
            <el-input v-model="form.username" placeholder="账号"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" placeholder="密码" type="password"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handelLogin" type="primary" class="submit-btn">提交</el-button>
          </el-form-item>
        </el-form>

        <!-- 注册 -->
        <el-form v-model="form" label-width="auto" class="registerForm sign-up-form">
          <el-form-item label="账号">
            <el-input v-model="form.username" placeholder="账号"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" placeholder="密码" type="password"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="handelLogin" type="primary" class="submit-btn">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>学习是为了有更多选择,让生活变的更加美好</h3>
          <p>卷死别人,累死自己</p>
          <button @click="signModel=!signModel" class="btn transparent">去注册</button>
        </div>
        <img class="image" src="@/assets/image/log.svg"/>
      </div>

      <div class="panel right-panel">
        <div class="content">
          <h3>以人为镜,可明得失, 以代码为镜,可通逻辑!</h3>
          <p>学习,让你的生活更有趣</p>
          <button @click="signModel=!signModel" class="btn transparent">去登录</button>
        </div>
        <img class="image" src="@/assets/image/register.svg"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, computed} from "vue"
import {useStore} from "vuex"
import {useRouter} from "vue-router"
import {ElLoading, ElMessage, ElNotification} from "element-plus"
import axios from "axios";
import {login} from "@/api/user";
import {dynamicRoutes} from "@/mock/data";
import {insertRoutes} from "@/utils/asyncRoutes";

const store = useStore()
const router = useRouter()

const signModel = ref<Boolean>(false)

const form = ref({
  username: "admin",
  password: "123456"
})

const handelLogin = () => {
  // axios.get('http://127.0.0.1:8080/api/user/login',form).then(res=>{
  //   console.log(res)
  // })
  login(form).then(res=>{
    console.log(res)
  })

  // store.commit("SET_ROUTES", dynamicRoutes)
  // insertRoutes(router,store)
  // store.commit('SET_TOKEN','123456')
  // router.push({path: "/"})
}

</script>

<style scoped lang="less">
.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    height: 2000px;
    width: 2000px;
    top: -10%;
    right: 50%;
    transform: translate(0, -50%);
    background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
    transition: 1.8s ease-in-out;
    border-radius: 50%;
    z-index: 6;
  }

  .forms-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .signin-signup {
      position: absolute;
      top: 65%;
      transform: translate(-50%, -50%);
      left: 71%;
      width: 500px;
      transition: 1s 0.7s ease-in-out;
      display: grid;
      grid-template-columns: 1fr;
      z-index: 5;


      .el-form {
        background-color: #fff;
        padding: 20px 40px 20px 20px;
        box-shadow: 0px 5px 10px #cccc;
        transition: all 0.2s 0.7s;
        overflow: hidden;
        box-sizing: border-box;
      }

      .loginForm {
        width: 100%;
      }

      .registerForm {
        width: auto;
        border-radius: 5px;
      }

      .sign-in-form {
        z-index: 2;
      }

      .sign-up-form {
        opacity: 0;
        z-index: 1;
        transform: translateX(1000px);
        transition: 1.8s ease-in-out;
      }
    }
  }


  .panels-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);


    .panel {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-around;
      text-align: center;
      z-index: 6;


      .content {
        color: #fff;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.6s;

        h3 {
          font-weight: 600;
          font-size: 30px;
          line-height: 0;
        }

        p {
          margin: 0;
        }
      }

      .image {
        width: 500px;
        transition: transform 1.1s ease-in-out;
        transition-delay: 0.4s;
      }

      .btn {
        width: 100px;
        background-color: transparent;
        border: 1px solid #ffffff;
        outline: none;
        height: 36px;
        border-radius: 49px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        margin: 10px 0;
        cursor: pointer;
        transition: 0.5s;


        .transparent {
          margin: 0;
          background: none;
          border: 2px solid #fff;
          width: 130px;
          height: 41px;
          font-weight: 600;
          font-size: 0.8rem;
        }

      }


    }

    .left-panel {
      pointer-events: all;
      transform: translateX(-20%);
    }

    .right-panel {
      pointer-events: none;
      padding-left: 20%;

      .image, .content {
        transform: translateX(100%);
      }
    }

  }
}


.signUpMode {
  &:before {
    transform: translate(100%, -50%) !important;
  }

  .signin-signup {
    left: 28% !important;
    top: 45% !important;
    transform: translate(-50%, 0);

    .loginForm {
      width: auto;
    }

    .registerForm {
      width: 100% !important;
    }

    .sign-in-form {
      opacity: 0 !important;
      z-index: 1 !important;
      transform: translateX(-1000px);
      transition: 1.8s ease-in-out;
    }

    .sign-up-form {
      opacity: 1 !important;
      z-index: 2 !important;
      transform: translateX(0) !important;
      transition: 1.8s ease-in-out;
    }

  }

  .panels-container {
    .left-panel {
      pointer-events: none;

      .image, .content {
        transform: translateX(-900px);
      }
    }

    .right-panel {
      pointer-events: all;

      .content {
        transform: translateX(-15%);
      }

      .image {
        transform: translateX(-50%);
      }
    }
  }
}

</style>
